<template>
  <div style="background-color: #fff; color: #000">
    <div class="test">
      <div v-for="(item, idx) in userRows" :key="idx">
        {{ item.title }} + {{ item.value }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { initData, useSignal, type User } from "@telegram-apps/sdk-vue";
import { computed } from "vue";
import { type DisplayDataRow } from "@/components/AppDisplayData.vue";

const initDataRef = useSignal(initData.state);

function getUserRows(user: User): DisplayDataRow[] {
  return [
    { title: "id", value: user.id.toString() },
    { title: "username", value: user.username },
    { title: "photo_url", value: user.photoUrl },
    { title: "last_name", value: user.lastName },
    { title: "first_name", value: user.firstName },
    { title: "is_bot", value: user.isBot },
    { title: "is_premium", value: user.isPremium },
    { title: "language_code", value: user.languageCode },
    { title: "allows_to_write_to_pm", value: user.allowsWriteToPm },
    { title: "added_to_attachment_menu", value: user.addedToAttachmentMenu },
  ];
}

const userRows = computed<DisplayDataRow[] | undefined>(() => {
  const user = initDataRef.value?.user;
  return user ? getUserRows(user) : undefined;
});

console.log(userRows, "ssssssssss");
</script>
